<template>
  <div class="platform-ctx">
    <div v-if="info && info.driverNum" class="ctx-item">
      <!-- <div class="item-box">
        <span class="iconfont icon-jiashiyuan"></span>
      </div>-->
      <div class="txt">
        <countTo :startVal="startInfo.driverNum" :endVal="info.driverNum" :duration="5000" />
         <div class="txt-unit">人</div>
      </div>
      <div class="txt-hint">注册驾驶员</div>
    </div>
    <div v-if="info && info.vehicleNum" class="ctx-item">
      <!-- <div class="item-box">
        <span class="iconfont icon-car"></span>
      </div>-->

      <div class="txt">
        <countTo :startVal="startInfo.vehicleNum" :endVal="info.vehicleNum" :duration="5000" />
        <div class="txt-unit">辆</div>
      </div>
      <div class="txt-hint">登记车辆</div>
    </div>

    <div v-if="info && info.weightRecorNum" class="ctx-item">
      <!-- <div class="item-box">
        <span class="iconfont icon-weigh"></span>
      </div>-->
      <div class="txt">
        <countTo :startVal="startInfo.weightRecorNum" :endVal="info.weightRecorNum" :duration="30000" />
        <div class="txt-unit">条</div>
      </div>
      <div class="txt-hint">称重数</div>
    </div>
    <div v-if="info && info.wayBillNum" class="ctx-item">
      <!-- <div class="item-box">
        <span class="iconfont icon-order"></span>
      </div>-->
      <div class="txt">
        <countTo :startVal="startInfo.wayBillNum" :endVal="info.wayBillNum" :duration="5000" />
         <div class="txt-unit">条</div>
      </div>
      <div class="txt-hint">运单数</div>
    </div>
  </div>
</template>

<script>
import { GetPlatformNumCondition } from "@/api/screenApi";

import countTo from "vue-count-to";
export default {
  name: "platform",
  components: {
    countTo,
  },
  data() {
    return {
      info: null,
      startInfo:{
        weightRecorNum:0,
        wayBillNum:0,
        vehicleNum:0,
        driverNum:0
      },
    };
  },
  created() {
    this.GetInfo();
  },
  mounted() {
    this.InterVal = setInterval(() => {
      this.startInfo=this.info;
      this.GetInfo();
    }, 20000);
  },
  destroyed() {
    this.InterVal ? clearInterval(this.InterVal) : null;
  },
  methods: {
    //获取list
    async GetInfo() {
      try {
        this.info = await GetPlatformNumCondition();
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.platform-ctx {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  .ctx-item {
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item-box {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(75, 216, 181, 0.816);
      box-shadow: 0 0 4px 2px rgba(75, 216, 181, 0.3);
      text-align: center;
      line-height: 40px;
      color: #fff;
      .iconfont {
        font-size: 20px;
      }
    }
    .txt {
      display: flex;
      flex-direction: row;

    align-items: flex-end;
      font-size: 24px;
      color: rgb(240, 202, 97);
    }
    .txt-hint {
      margin-top: 0.2rem;
      font-size: 14px;
      color: rgb(106, 159, 250);
    }
    .txt-unit {

      margin-top: 0.25rem;
      margin-left: 0.2rem;
      font-size: 12px;
      color: rgb(106, 159, 250);
    }
  }
}
</style>
